<template>
	<view class="leader">
		<view class="header">
			推荐领队
		</view>
		<scroll-view class="viewScroll" :scroll-x="true" scroll-y="false">
			<view class="scroll-box">
				<view class="leader-card" v-for="(item,index) in data" :key="index" @click="lookLeader(item.leader_id)">
					<image :src="imageUrl +item.leader_image" mode="aspectFill"></image>
					<text>{{item.leader_name}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="click-tips">
			tips:点击领队可查看领队详情
		</view>
	</view>
</template>

<script setup>
	import { imageUrl } from '../../../config/request/request';
	import {ref} from 'vue';
	const props = defineProps({
		data: {
			type: Array,
			default: []
		}
	})
	const emits = defineEmits(['lookLeader'])
	const lookLeader = (id) => {
		emits('lookLeader', id)
	}
</script>

<style scoped>
	.header {
		font-size: 34rpx;
		padding: 0 10rpx;
	}

	.leader {
		font-family: "仓耳渔阳体 W05";
		width: 100%;
		margin: 40rpx 0 20rpx 0;
	}

	.viewScroll {
		padding: 20rpx 20rpx;
		width: 748rpx;
		box-sizing: border-box;
	}

	.scroll-box {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		padding-bottom: 20rpx;
	}

	.accommodation {
		font-family: "仓耳渔阳体 W05";
		width: 100%;
		margin: 20rpx 0;
	}

	.leader-card {
		display: inline-flex;
		align-items: center;
		flex-direction: column;
		margin: 0 30rpx;
		box-sizing: border-box;
		white-space: pre-line;
		gap: 16rpx;
	}

	.leader-card image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.click-tips {
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		color: rgba(128, 128, 128, 1);
		text-align: left;
	}
</style>